<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>所有团长列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 引入layui.css -->
    <link
            rel="stylesheet"
            href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"
    >
    <!-- 引入layui.js -->
    <script scr="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <!--表单信息（搜索条件）-->
      <div class="layui-form">
        <!--这两个隐藏的输入框用来存放当前页码值，以及页面显示数据的最大行数-->
        <input type="hidden" name="pageNum" id="pageNum" value="1">
        <input type="hidden" name="pageSize" id="pageSize" value="10">
        <div class="layui-form-item">
          <!--    日期选择器-->
          <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <label class="layui-form-label">日期</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="dateSelect" id="dateSelect" placeholder="请选择">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">团长名</label>
            <div class="layui-input-block">
              <input type="text" name="username"
                     placeholder="请输入" autocomplete="off" class="layui-input" >
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
              <input type="text" name="telep" placeholder="请输入"
                     autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button id="getUser" class="layui-btn" lay-submit lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search"></i>
            </button>
          </div>
        </div>
      </div>
<!--      <xblock>-->
<!--        <button class="layui-btn layui-btn-danger" onclick="delMany()" id="delMany1"><i class="layui-icon"></i>批量删除</button>-->
<!--        <span class="x-right" style="line-height:40px" id="userNum">共有数据：88 条</span>-->
<!--      </xblock>-->
      <script type="text/html" id="table-operation">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="money">
          <i class="layui-icon layui-icon-rmb"></i>佣金</a>
        <a class="layui-btn layui-btn layui-btn-xs" lay-event="group">
          <i class="layui-icon layui-icon-group"></i>团员</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
          <i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
<div style="text-align: center">
      <!--数据表格位置-->
      <table id="data-table" lay-filter="data-table"></table>
      <!--分页位置-->
      <div id="data-page" class="layui-table-page" lay-filter="data-page"></div>
</div>
    </div>


    <script>
        var cids=new Array()
        var cidsList=new Array()
        /*删除数组中指定下标的元素*/
        function remove(arr, item) {
            for(var i=arr.length-1;i>=0;i--)
            {
                if(arr[i]==item)
                {
                    arr.splice(i,1);
                }
            }
            return arr;
        }
        // 此时不用考虑位置影响

      layui.use(['form','table','laypage','layer','laydate'], function() {
        var $ = layui.jquery
                , form = layui.form, table = layui.table, laypage = layui.laypage, layer = layui.layer,
                laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
          elem: '#dateSelect' //指定html中的id
        })

        var limits = [10, 20, 30, 40]
        var pageNum = $("#pageNum")
        var pageSize = $("#pageSize")
        let userTable = table.render({
          elem: "#data-table",
          url: "/colonel/getApplicationColonelByPageNum/" + 1,//请求地址
          id: "idTest",
          // toolbar: true,
          cols: [[
            // {type: 'checkbox'},
            //sort：这一列是否开启排序
            {field: "cid", width: 30, title: "ID", sort: true,hide:true},
            //minWidth:最小显示宽度
            {field: "colonelname", title: "团长名", align: 'center',width: 120},
            //title:表头里的文字内容
            //field:字段名，要与后端响应的数据字段一致，否则该数据不会在表格中显示
            {field: "avatar", title: "头像", style: "height:40px",width:100, align: "center", templet: "#imgtmp"},
            {field: "telep", title: "手机", align: 'center',width: 120},
            {field: "address", title: "地址", align: 'center'},
            {field: "money", title: "收益（元）", align: 'center', width: 120,sort: true},
            {field: "royalty", title: "提成%", align: 'center', edit: true,width: 120},
            {field: "applicationtime", title: "申请时间", sort: true,align: 'center'},
            {title: "操作", align: 'center', toolbar: "#table-operation"}
          ]],
          done: function (res, curr, count) {
            //显示总数据量
            $('#userNum').html('共有数据：' + res.count + ' 条')
            //显示服务器响应的数据，方便观看
            console.log("服务器返回数据")
            console.log(res)
            let data = res.data
            //  把该页所有数据的用户id保存到uidsList用于后面的全选删除操作
            console.log(data)
            for (let i = 0; i < data.length; i++) {
              cidsList.push(data[i].cid)
            }
            console.log("cidsList:" + cidsList)
            laypage.render({
              elem: 'data-page',//被渲染的分页栏id，此处不需要加#号
              count: count,//数据总条数
              curr: res.pageNum,//当前页码
              limit: res.pageSize,//当前页展示的最大行数
              limits: limits,//分页大小选项
              //分页栏的样式，具体情况可以去layui镜像网站查看
              layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
              jump: function (obj, first) {
                //将当前分页栏的属性打印在控制台，方便观察
                console.log("当前分页栏的属性")
                console.log(obj)
                //当操作分页栏后，获得当前页码的数据，赋值给隐藏的用来存放页码的输入框
                $("#pageNum").val(obj.curr)
                // pageNum=obj.curr
                //同理它是赋值给pageSize的
                $("#pageSize").val(obj.limit)
                // pageSize=obj.limit
                //如果是首次加载页面，那就不执行
                // alert("1")
                if (!first) {
                  //不是首次加载页面的话，就触发按钮的提交事件
                  // alert("2")
                  $("#getUser").click()
                  cidsList = []
                  cids = []
                }
              }
            });
          },
        });

        form.on('submit(LAY-user-front-search)', function (data) {
          var filed = data.field;
          table.reload('idTest', {
            where: filed
          });
          return false;
        });

        /*用户-删除全部*/
        function delAll(argument) {
          var data = tableCheck.getData();
          layer.confirm('确认要删除吗？' + data, function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
          });
        }

        /*
        * 刪除一条数据
        * 点击某一行时触发的事件，obj可获取该行所有数据
        */
        table.on('tool(data-table)', function (obj) { //注：tool 是工具条事件名，data-table 是 table 原始容器的属性 lay-filter="对应的值"
          var data = obj.data; //获得当前行数据
          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
          console.log(data)
          var cid = data.cid;  //团长id
          //监听点击按钮事件
          if (layEvent === 'group') { //查看团员信息
            layer.open({
              type: 2,
              area: [800 + 'px', 500 + 'px'],
              fix: false, //不固定
              maxmin: true,
              shadeClose: true,
              shade: 0.4,
              title: '团员信息',
              content: './crew-list.html?cid=' + cid,
            });
            // x_admin_show('团员信息','./crew-list.html',1200,600)
          } else if (layEvent === 'del') { //删除
            layer.confirm('真的删除行么', function (index) {
              obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
              layer.close(index);
              //向服务端发送删除指令
              $.ajax({
                type: 'GET',
                url: "/users/" + uid + "/delUserByUid",
                processData: false,
                contentType: false,
                async: false,
                success: function (res) {
                  console.log(res);
                }
              });
            });
          } else if (layEvent === 'money') { //查看团长的每月佣金，每月佣金来自于每月团员的订单金额
            //do something
            layer.open({
              type: 2,
              area: [600 + 'px', 500 + 'px'],
              fix: false, //不固定
              maxmin: true,
              shadeClose: true,
              shade: 0.4,
              title: '团长每月佣金',
              content: './colonelMoney.html?cid=' + cid,
            });
          }
        });


        // var uids=new Array()
        table.on('checkbox(data-table)', function (obj) {
          var data = obj.data;
          console.log("复选框")
          console.log(obj); //当前行的一些常用操作集合
          console.log(obj.checked); //当前是否选中状态

          //若是选择状态，则加入uids数组
          if (obj.checked == true) {
            uids.push(data.uid)
          } else {//若为未选择状态，则删除该uid
            uids = remove(uids, data.uid)
          }
          console.log(obj.data); //选中行的相关数据
          console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
          if (obj.type == "all") {
            console.log(data);
            uids = uidsList
          }
          console.log(uids)
        });

        //触发行单击事件,单击即可修改表格中数据
        table.on('row(data-table)', function (obj) {
          console.log(obj.tr) //得到当前行元素对象
          console.log(obj.data) //得到当前行数据
          $.ajax({
            type: 'GET',
            url: "/colonel/updateRoyalty/"+obj.data.cid+"/"+obj.data.royalty,
            processData: false,
            contentType: false,
            async: false,
            success: function (res) {
              console.log(res);
            }
          });
          obj.update({
            royalty: obj.data.royalty
          });

        })
      })//layui结束


              function delMany(argument) {
                  console.log("============="+uids)
                  layer.confirm('确认要删除吗？' + uids, function (index) {
                      //捉到所有被选中的，发异步进行删除
                      layer.msg('删除成功', {icon: 1});
                      $.ajax({
                          type: 'GET',
                          url: "/users/"+uids+"/delManyUsers",
                          processData: false,
                          contentType: false,
                          async: false,
                          success: function (res) {
                              console.log(res);
                          }
                      });
                  });
              }

</script>
<script type="text/html" id="imgtmp">
  <img src="{{d.avatar}}" style="width:40px;height: 40px;">
</script>
  </body>

</html>